import React from 'react';
import { Button, Switch, message, Tooltip } from 'antd';
import { connect } from 'react-redux';
import RiskList from './list';
import CommonListsIndex from '../../../components/CommonLists/index';
import RiskAdd from './add';
import services from '../../../services/api';
// import { isEqual } from 'lodash';

@connect(mapStateToProps)
class RiskMonitorIndex extends CommonListsIndex {
  constructor(props) {
    super(props);
    this.api = 'riskMonitor';
    this.listsComponent = RiskList;
    this.addComponent = RiskAdd;
    this.editComponent = RiskAdd;
    this.model_width = 1000;
  }
  componentDidMount() {
    this.freshQueryList();
    this.getAppCodeList();
    this.getProductCodeList();
  }
  // swtichStatus
  handleSwitchStatus = (record) => {
    const param = {
      id: record.id,
      status: record.status === 1 ? 2 : 1,
    };
    services.riskMonitor.switchStatus(param).then((data) => {
      if (data.code === 0) {
        message.success(data.msg);
        this.freshQueryList();
      } else {
        message.error(data.msg);
      }
    });
  };

  getColumns = () => {
    return [
      {
        title: '监控任务名称',
        key: 'monitor_name',
        dataIndex: 'monitor_name',
        render: (text) => (
          <Tooltip title={text} placement='topLeft'>
            <div className='overflowtext'>{text}</div>
          </Tooltip>
        ),
      },
      {
        title: '监控周期',
        key: 'monitor_period',
        dataIndex: 'monitor_period',
        render: (_, { monitor_period, unit_label }) => {
          const text = monitor_period + unit_label;
          return (
            <Tooltip title={text} placement='topLeft'>
              <div className='overflowtext'>{text}</div>
            </Tooltip>
          );
        },
      },
      {
        title: (
          <>
            {this.getFilterTitle(
              '渠道',
              this.state.applications,
              'app_id',
              this.refreshTableFilterWithAppV2.bind(this, 'app_id'),
              ['app_id', 'app_name']
            )}
          </>
        ),
        key: 'app_name',
        dataIndex: 'app_name',
        ellipsis: true,
        render: (text) => (
          <Tooltip title={text} placement='topLeft'>
            {text}
          </Tooltip>
        ),
      },
      {
        title: (
          <>
            {this.getFilterTitle(
              '产品',
              this.state.products,
              'product_id',
              this.refreshTableFilterWithAppV2.bind(this, 'product_id'),
              ['product_id', 'product_name']
            )}
          </>
        ),
        key: 'product_name',
        dataIndex: 'product_name',
        ellipsis: true,
        render: (text) => (
          <Tooltip title={text} placement='topLeft'>
            {text}
          </Tooltip>
        ),
      },
      {
        title: (
          <>
            {this.getFilterTitle(
              '事件',
              this.state.events,
              'event_id',
              this.refreshTableFilterWithAppV2.bind(this, 'event_id'),
              ['event_id', 'event_name']
            )}
          </>
        ),
        key: 'event_name',
        dataIndex: 'event_name',
        ellipsis: true,
        render: (text) => (
          <Tooltip title={text} placement='topLeft'>
            {text}
          </Tooltip>
        ),
      },
      // {
      //   title: (
      //     <>
      //       {this.getFilterTitle('可见部门', this.props.depts, 'dept_id', this.refreshTableFilter, [
      //         'dept_id',
      //         'dept_name',
      //       ])}
      //     </>
      //   ),
      //   dataIndex: 'dept_names',
      //   key: 'dept_names',
      //   render: (text, { dept_ids }) => {
      //     const allDeptIds = this.props.depts.map((item) => item.dept_id);
      //     const depts_label = isEqual(dept_ids, allDeptIds) ? '全部' : text.join(',');
      //     return (
      //       <Tooltip title={depts_label} placement='topLeft'>
      //         <div className='overflowtext'>{depts_label}</div>
      //       </Tooltip>
      //     );
      //   },
      // },
      {
        title: '状态',
        dataIndex: 'status',
        key: 'status',
        render: (text, record) => {
          return <Switch checked={text === 1} onChange={this.handleSwitchStatus.bind(this, record)} />;
        },
      },
      {
        title: '接收人',
        dataIndex: 'people_count',
        key: 'people_count',
        render: (text) => (
          <Tooltip title={text + '人'} placement='topLeft'>
            <div className='overflowtext'>{text + '人'}</div>
          </Tooltip>
        ),
      },
      {
        title: '预警方式',
        dataIndex: 'receive_type',
        key: 'receive_type',
        render: (text) => (
          <Tooltip title={text} placement='topLeft'>
            <div className='overflowtext'>{text}</div>
          </Tooltip>
        ),
      },
      {
        title: '监控说明',
        dataIndex: 'remark',
        key: 'remark',
        render: (text) => (
          <Tooltip title={text} placement='topLeft'>
            <div className='overflowtext'>{text}</div>
          </Tooltip>
        ),
      },
      {
        title: '创建人/修改人',
        dataIndex: 'create_user_name',
        key: 'create_user_name',
        render: (text, { update_user_name }) => (
          <Tooltip title={`${text}/${update_user_name}`} placement='topLeft'>
            <div className='overflowtext'>{`${text}/${update_user_name}`}</div>
          </Tooltip>
        ),
      },
      {
        title: '修改时间',
        key: 'update_time',
        dataIndex: 'update_time',
        render: (text) => (
          <Tooltip title={text} placement='topLeft'>
            <div className='overflowtext'>{text}</div>
          </Tooltip>
        ),
      },
    ];
  };

  render() {
    const ListsComponent = this.listsComponent;

    return (
      <div>
        <div className='flex flex-start'>
          <Button type='primary' onClick={this.add.bind(this, { title: '添加监控' })}>
            添加监控任务
          </Button>
        </div>
        <div className='inner-content' style={{ marginTop: '10px' }}>
          <ListsComponent
            {...this.state}
            {...this.props}
            mediator={this}
            edit={this.edit}
            showDetail={this.showDetail}
            onChangePagination={this.onChangePagination}
            queryList={this.freshQueryList}
            columns={this.getColumns()}
            rowKey='id'
          />
        </div>
      </div>
    );
  }
}

function mapStateToProps(state) {
  const { code, global } = state;
  const { monitor_oper, monitor_busi_type, monitor_period_unit, data_report_send_type, monitor_data_type } = code;
  // const { depts } = global;
  console.log(global)
  return {
    monitor_oper,
    monitor_busi_type,
    monitor_period_unit,
    data_report_send_type,
    monitor_data_type
    // depts,
  };
}
export default RiskMonitorIndex;
